<template>
	<div class="memorial-page-container">
		<!-- 1. 顶部导航栏 -->
		<el-header class="page-header">
			<div class="logo-area">
				<span class="logo-text">今生永恒网</span>
				<span class="sub-logo-text">网上纪念馆</span>
				<span class="logo-url">www.cqjsyh.com</span>
			</div>
			<nav class="main-nav">
				<!-- 这里可以替换为 ElMenu 或保持简单链接 -->
				<el-link :underline="false" @click="tabChange(7)">墓牌</el-link>
				<el-link :underline="false" @click="tabChange(1)">生平简介</el-link>
				<el-link :underline="false" @click="tabChange(2)">纪念相册</el-link>
				<el-link :underline="false" @click="tabChange(3)">祭文悼词</el-link>
				<el-link :underline="false" @click="tabChange(4)">纪念文集</el-link>
				<el-link :underline="false" @click="tabChange(5)">快速建馆</el-link>
				<el-link :underline="false" @click="tabChange(6)">返回首页</el-link>
			</nav>
			<div class="user-area">
				<span>15116908287 管理中心 | </span>
				<el-link :underline="false">退出</el-link>
			</div>
		</el-header>

		<!-- 2. 主要内容区域 -->
		<el-main class="page-main">
			<!-- 2.1 核心纪念区 -->
			<div class="memorial-section">
				<h1 class="memorial-title">{{ muDetail.alias || '纪念馆' }}</h1>
				<div class="portrait-area">
					<!-- 使用 ElImage 显示肖像 -->
					<el-image style="width: 100px; height: 120px; border: 1px solid #ccc;" :src="muDetail.avatar"
						fit="cover">
						<template #error>
							<div class="image-slot">肖像图片</div>
						</template>
					</el-image>
				</div>
				<p class="deceased-name">{{ muDetail.name }}</p>
				<p class="life-dates">{{ muDetail.birth_date }} ~ {{ muDetail.death_date }}</p>
				<p class="visit-stats">
					浏览数: {{ muDetail.visit }} 墓地祭奠: 1 留言: {{ leaveNoteCount }}
				</p>
				<div class="action-icons" >
					<div class="action-item" @click="goToLibation('献花')">
						<el-image style="width: 40px; height: 40px;" :src="portraitImage1" fit="contain">
							<template #error>
								<div class="icon-placeholder"></div>
							</template>
						</el-image>
						<span>献花</span>
					</div>
					<div class="action-item" @click="goToLibation('点烛')">
						<el-image style="width: 40px; height: 40px;" :src="portraitImage2" fit="contain">
							<template #error>
								<div class="icon-placeholder"></div>
							</template>
						</el-image>
						<span>点烛</span>
					</div>
					<div class="action-item" @click="goToLibation('上香')">
						<el-image style="width: 40px; height: 40px;" :src="portraitImage3" fit="contain">
							<template #error>
								<div class="icon-placeholder"></div>
							</template>
						</el-image>
						<span>上香</span>
					</div>
					<div class="action-item" @click="goToLibation('献供')">
						<el-image style="width: 40px; height: 40px;" :src="portraitImage4" fit="contain">
							<template #error>
								<div class="icon-placeholder"></div>
							</template>
						</el-image>
						<span>献供</span>
					</div>
					<div class="action-item" @click="goToLibation('献歌')">
						<el-image style="width: 40px; height: 40px;" :src="portraitImage5" fit="contain">
							<template #error>
								<div class="icon-placeholder"></div>
							</template>
						</el-image>
						<span>献歌</span>
					</div>
				</div>
			</div>

			<!-- 背景图会占据这部分以及左侧空白区域 -->
			<div class="content-with-background">
				<!-- 2.2 生平简介 -->
				<div class="biography-section" v-if="tabIndex == 1">
					<h2 class="section-title bio-title">生平简介</h2>
					<p>
						<span>姓名:</span>
						<span>{{ muDetail.name }}</span>
					</p>
					<p>
						<span>生日:</span>
						<span>{{ muDetail.birth_date }}</span>
					</p>
					<p>
						<span>逝世:</span>
						<span>{{ muDetail.death_date }}</span>
					</p>
					<p>
						<span>祖籍:</span>
						<span>{{ muDetail.ancestral }}</span>
					</p>
					<p>
						<span>宗教:</span>
						<span>{{ muDetail.religion }}</span>
					</p>
					<p>
						<span>职业:</span>
						<span>{{ muDetail.career }}</span>
					</p>
					<p class="bio-text">奶奶是一个农民，一辈子简简单单，人善良，心好。</p>
					<!-- <el-link type="primary" :underline="false">>> 查看详细</el-link> -->
				</div>
				<!-- 2.3 纪念相册 -->
				<div class="album-section" v-if="tabIndex == 2">
					<h2 class="section-title album-title">纪念相册</h2>
					<div class="album-section-list" v-if="albumList.length > 0 && !isShowPhoto">
						<div class="album-section-list-item" v-for="item in albumList" :key="item.id" @click="albumChange(item.id)">
							<div class="album-section-list-item-left" style="width: 106px;">
								<el-image style="width: 100px; height: 100px;" :src="item.cover" fit="cover" />
							</div>
							<div class="album-section-list-item-right">
								<div class="album-section-list-item-right-user">
									<p>{{ item.title }}</p>
									<p>{{ item.desc?item.desc:'' }}</p>
								</div>
								<div class="album-section-list-item-right-content">
									<p>
										<span>{{ timeFormat(item.create_time, 'yyyy-MM-dd') }}</span>
										<span>状态：开放</span>
									</p>
									<p></p>
								</div>
							</div>
						</div>
					</div>
					<div class="album-empty" v-else-if="albumList.length == 0 && !isShowPhoto">暂无相册</div>
					<div class="photo-back" @click="isShowPhoto = false" v-if="isShowPhoto">返回相册首页</div>
					<div class="photo-list" v-if="photoList.length > 0 && isShowPhoto">
						<div class="photo-list-item" v-for="(item, index) in photoList" :key="item.id">
							<div class="photo-list-item-image" style="width: 106px;">
								<el-image style="width: 100px; height: 100px;" :src="item.cover" fit="cover" :initial-index="index + 1"/>
								<p>{{ item.title }}</p>
							</div>
						</div>
					</div>
					<div class="album-empty" v-else-if="photoList.length == 0 && isShowPhoto">暂无相册</div>
				</div>
				<!-- 3、留言 -->
				<div class="leaveNote-section" v-if="tabIndex == 3">
					<h2 class="section-title album-title">祭文悼词</h2>
					<div class="leaveNote-list">
						<div class="leaveNote-list-item" v-for="item in leaveNoteList" :key="item.id">
							<div class="leaveNote-list-item-left">
								<el-image style="width: 100px; height: 100px;" :src="item.jidian_info.file_url" fit="cover" v-if="item.jidian_info.file_type != 2"/>
								<el-image style="width: 100px; height: 100px;" :src="music_icon" fit="cover" v-if="item.jidian_info.file_type == 2"/>
							</div>
							<div class="leaveNote-list-item-right">
								<p>
									<span>签名：{{ item.sign_name }}</span>
									<span>{{ item.create_time }}</span>
								</p>
								<p>
									{{ item.content }}
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="article-section" v-if="tabIndex == 4">
					<h2 class="section-title album-title">纪念文集</h2>
					<div class="articlebtn"><el-button type="info" plain  @click="isShowArticle = !isShowArticle">添加文章</el-button></div>
					<div class="article-form" v-if="isShowArticle">
						<el-form ref="articleFormRef" :model="articleForm" label-width="80px">
							<el-form-item label="文章标题" prop="title">
								<el-input v-model="articleForm.title"></el-input>
							</el-form-item>
							<el-form-item label="文章内容" prop="content">
								<el-input v-model="articleForm.content" type="textarea" :rows="5" :autosize="{ minRows: 5 }"></el-input>
							</el-form-item>
							<el-form-item label="标题" prop="title">
								<el-button type="primary" @click="submitArticleForm(articleFormRef)">发布新文章</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div class="article-list">
						<div class="article-list-item" v-for="item in articleList" :key="item.id">
							<p>
								<span>{{ item.title }}</span>
								<!-- <span>(浏览：14)</span> -->
							</p>
							<p>{{ item.create_time }}</p>
						</div>
					</div>
				</div>

				<div class="video-section" v-if="tabIndex == 5">
					<h2 class="section-title video-title">视频</h2>
					<div class="section-preview">
						<video :src="videoSrc" :controls="showControls" :autoplay="autoPlay" :defaultMuted="defaultMuted" :volume="volumeValue" :disablePictureInPicture="disablePictureInPicture" :muted="muted" :loop="loop"></video>
					</div>
					<div class="video-list" v-if="videoList.length > 0">
						<div class="video-list-item" v-for="(item, index) in videoList" :key="item.id">
							<div class="video-list-item-image" style="width: 106px;">
								<video :src="item.video" style="width: 100%;height: 100px;" @click="openVideo(item.video)"></video>
								<!-- <el-image style="width: 100px; height: 100px;" :src="item.cover" fit="cover" :initial-index="index + 1"/> -->
								<p>{{ item.title }}</p>
							</div>
						</div>
					</div>
					<div class="video-empty" v-else-if="videoList.length == 0 && isShowPhoto">暂无相册</div>
				</div>
			</div>

		</el-main>

		<!-- 3. 页脚 -->
		<el-footer class="page-footer">
			<el-divider />
			<div class="footer-line-1">
				<span>赵淑珍网上纪念馆 网址:</span>
				<el-link href="http://www.cqjsyh.com/"
					target="_blank">http://www.cqjsyh.com/</el-link>
				<el-link :underline="false" style="margin-left: 15px;">[复制]</el-link>
				<el-link :underline="false" style="margin-left: 5px;">收藏本馆</el-link>
				<el-link :underline="false" style="margin-left: 5px;">管理纪念馆</el-link>
			</div>
			<div class="footer-line-2">
				<el-link :underline="false">纪念馆首页</el-link> |
				<el-link :underline="false">网上墓碑</el-link> |
				<el-link :underline="false">生平简介</el-link> |
				<el-link :underline="false">祭奠留言</el-link> |
				<el-link :underline="false">纪念相册</el-link> |
				<el-link :underline="false">纪念文章</el-link> |
				<el-link :underline="false">关于本馆</el-link>
			</div>
			<div class="footer-line-3">
				<span>Copyright(C)今生永恒网 www..com 版权所有.</span>
				<el-link :underline="false" style="margin-left: 5px;">[联系今生永恒网]</el-link>
			</div>
			<div class="footer-line-4">
				<el-link :underline="false">互联网违法和不良信息举报</el-link>
			</div>
		</el-footer>

		<!-- 背景图元素或样式可以应用到 memorial-page-container 或创建一个专门的背景层 -->
		<!-- <div class="background-layer"></div> -->
		<div class="graveyard_QRcode" @click="showQrCode">
			<img src="@/assets/images/qrcodeIcon.png" alt="">
		</div>
		<!-- <el-dialog v-model="isShowQrCode" :title="muDetail.name + '纪念馆二维码'" width="auto">
            <div class="qrcode-view">
                <QrcodeVue 
                    :value="qrValue" 
                    class="qrcode-element"
                    id="qrcode"
                    ref="qrcodeRef"
                    render-as="canvas"
                    :size="200"
                />
                <el-button @click="downloadQrcode">下载</el-button>
            </div>
        </el-dialog> -->
		<QrCodePage 
            v-model="isShowQrCode" 
            :qr-value="qrValue" 
            :title="muDetail.name + '纪念馆二维码'"
        />
	</div>
</template>

<script setup lang="ts">
	// 按需引入 Element Plus 组件（如果配置了自动导入则可能不需要）
	import { apiMuDetail } from '@/api/graveyard'
	import { apiMuLeaveNoteList } from '@/api/leaveNote'
    import { apiAlbumList, apiPhotoList} from '@/api/album';
	import { apiMuAddArticle, apiMuArticleList } from '@/api/article'
	import { timeFormat } from '@/utils/util'
	import { apiVideoList } from '@/api/video'
	import {
		ElHeader,
		ElMain,
		ElFooter,
		ElLink,
		ElImage,
		ElDivider
	} from 'element-plus';
	import { ref, onMounted } from 'vue';
	import QrCodePage from '@/components/qrCodePage.vue'
	import { index_share_img } from '@/api/family'
	import { useRouter, useRoute } from 'vue-router'
	import type { FormInstance } from 'element-plus'
	// 引入图片
	import portraitImage1 from '../../assets/images/detail_image_fllower.png'	// 替换为献花图标 URL
	import portraitImage2 from '../../assets/images/detail_image.gif'	// 替换为点烛图标 URL
	import portraitImage3 from '../../assets/images/detail_image.png'	// 替换为上香图标 URL
	import portraitImage4 from '../../assets/images/detail_image_shop.png'	// 替换为献供图标 URL
	import portraitImage5 from '../../assets/images/detail_image_audio.png'	// 替换为献歌图标 URL
	import music_icon from '../../assets/images/music_icon.gif'	// 替换为献歌图标 URL
	import QrcodeVue from 'qrcode.vue'; // 导入 qrcode.vue 组件
	const router = useRouter()
	const route = useRoute();
	// 这里可以放置组件的逻辑，对于静态页面可能不需要太多逻辑
	

	// 如果图标 URL 是固定的，可以直接写在 <template> 的 src 属性里

	// 视频配置
	const videoSrc = ref('')
	const videoList = ref([])
	// 视频配置
    const showControls = ref(true) // 是否显示controls
    const autoPlay = ref(true) // 是否自动播放
    const muted = ref(false) // 是否静音
    const loop = ref(false) // 是否循环
    const disablePictureInPicture = ref(false) // 是否禁用画中画
    const volumeValue = ref(1) // 音量
    const defaultMuted = ref(false)
	
	const tabIndex = ref(1) // 导航id
	const mu_id = route.query.mu_id // 墓地id
	const isShowPhoto = ref(false) // 相册是否显示
	// 文章表单
	const articleFormRef = ref<FormInstance>()
	const articleForm = ref({
		title: '',
		content: '',
		mu_id: route.query.mu_id
	})
	const isShowArticle = ref(false) // 文章是否显示
	const goToLibation = (title: string) => {
		// 你可以在这里实现跳转逻辑
		router.push('/libation' + '?mu_id=' + mu_id + '&title=' + title)
	}




	// 留言列表
	const leaveNoteList = ref([])
	const leaveNoteCount = ref(0)
	const getApiMuLeaveNoteList = async () => {
		const res = await apiMuLeaveNoteList({ mu_id: route.query.mu_id })
		console.log(res)
		leaveNoteList.value = res.list
		leaveNoteCount.value = res.total
	}
	// 获取纪念馆详情
	const muDetail = ref({})
	const getApiMuDetail = async () => {
		const res = await apiMuDetail({ id: route.query.mu_id })
		console.log(res)
		muDetail.value = res
		// qrValue.value = 'https://cqjsyh.com/H5/pages/individualSpace/index?id=' + route.query.mu_id
	}

	// 点击导航栏切换下面的信息
	const tabChange = async (index: number) => {
		if(index == 5){
			router.push('/createMemorial')
		} else if (index == 6) {
			router.push('/')
		} else if (index == 7) {
			// router.push('/muDetail?id=' + route.query.mu_id)
			const targetRouteLocationForButton = {
				name: 'muDetail',
				query: { id: route.query.mu_id },
			};
			const resolvedRouteForButton = router.resolve(targetRouteLocationForButton);
			console.log(resolvedRouteForButton)
			// 使用 window.open 打开新标签页
			window.open(resolvedRouteForButton.href, '_blank');
		}else{
			tabIndex.value = index
			if(index == 2){
				await getAlbumList()
			}else if(index == 3){
				await getApiMuLeaveNoteList()
			}else if(index == 4){
				await getApiMuArticleList()
			}
		}
	}

	// 获取相册数据
	const albumList = ref([])
	const getAlbumList = async () => {
		const res = await apiAlbumList({mu_id: route.query.mu_id})
		albumList.value = res.list
	}

	// 获取照片数据
	const photoList = ref([])
	const getApiPhotoList = async (id: number | string) => {
		const res = await apiPhotoList({album_id: id})
		photoList.value = res.list
	}
	// 选择相册
	const albumChange = async (id: number | string) => {
		isShowPhoto.value = true
		await getApiPhotoList(id)
	}

	

	// 获取文章数据
	const articleList = ref([])
	const getApiMuArticleList = async () => {
		const res = await apiMuArticleList({mu_id: route.query.mu_id})
		articleList.value = res.list
	}

	// 添加文章
	const submitArticleForm = async (formEl: FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate(async (valid: any) => {
			if (valid) {
				await apiMuAddArticle(articleForm.value).then((res) => {
					console.log(res)
					isShowArticle.value = false
					getApiMuArticleList()
				})
			}
		})
	}

	const openVideo = async (videoUrls: string) => {
		videoSrc.value = videoUrls
	}

	onMounted(() => {
		
		getApiMuDetail()

		if(route.query.type == 'videos'){
			tabIndex.value = 5
			apiVideoList({mu_id: route.query.mu_id}).then((res) => {
				console.log(res)
				videoList.value = res.list
				videoSrc.value = res.list[0].video
			})
		}

		if(route.query.type == 'articles'){
			tabIndex.value = 4
			getApiMuArticleList()
		} else if(route.query.type == 'photos'){
			tabIndex.value = 2
			getAlbumList()
		} else if(route.query.type == 'life'){
			tabIndex.value = 1
		} else if(route.query.type == 'messages'){
			tabIndex.value = 3
			getApiMuLeaveNoteList()
		}

	})


	// 显示二维码
	const qrValueUrl = ref('https://cqjsyh.com/H5/pages/individualSpace/index?id=' + route.query.mu_id)
	const qrValue = ref('')
	const isShowQrCode = ref(false)
	const qrCodeInfo = ref<any>(null)
	const showQrCode = async () => {
		// 获取二维码图片URL
		const res = await index_share_img({ url: qrValueUrl.value })
		qrValue.value = res.url
		isShowQrCode.value = true
	}

	// 下载二维码
	const qrcodeRef = ref<HTMLElement | null>(null);
	const downloadQrcode = async () => {
	if (!qrcodeRef.value) return;
	await nextTick() // 确保 QRCode 渲染完

		const el = document.getElementById('qrcode') as HTMLCanvasElement
		if (!el) {
		console.error('二维码未找到', document.getElementById('qrcode'))
		console.log(document.getElementById('qrcode'))
		return
		}

		const imgData = el.toDataURL('image/png')

		// 创建下载链接
		const link = document.createElement('a')
		link.href = imgData
		link.download = 'qrcode.png'
		link.click()
	}
</script>

<style scoped>
	.memorial-page-container {
		font-family: 'SimSun', 'Microsoft YaHei', sans-serif;
		/* 优先使用宋体 */
		color: #333;
		line-height: 1.6;
		/* 在这里或创建一个 .background-layer 来设置背景图 */
		/* background: url('your-background-image.jpg') no-repeat left bottom; */
		/* background-size: contain; or cover, or specific dimensions */
		position: relative;
		/* Needed if using absolute positioning for background */
		min-height: 100vh;
		/* Ensure container takes full height */
		display: flex;
		flex-direction: column;
	}

	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		border-bottom: 1px solid #eee;
		height: auto;
		/* Adjust height as needed */
		background-color: #fff;
		/* Header usually has a solid background */
	}

	.logo-area .logo-text {
		font-size: 24px;
		font-weight: bold;
		margin-right: 5px;
	}

	.logo-area .sub-logo-text {
		font-size: 14px;
		margin-right: 5px;
	}

	.logo-area .logo-url {
		font-size: 12px;
		color: #999;
	}

	.main-nav .el-link {
		margin: 0 10px;
		color: #333;
		/* Standard link color */
		font-size: 14px;
	}

	.main-nav .el-link:hover {
		color: #409EFF;
	}

	.user-area {
		font-size: 13px;
		color: #666;
	}

	.user-area .el-link {
		font-size: 13px;
		color: #666;
	}

	.user-area .el-link:hover {
		color: #409EFF;
	}

	.page-main {
		flex-grow: 1;
		/* Allow main content to take available space */
		padding: 20px;
		display: flex;
		/* Use flex to position content areas */
		justify-content: center;
		/* Center the main content block horizontally */
		align-items: flex-start;
		/* Align items to the top */
		/* background-color: rgba(255, 255, 255, 0.8); /* Optional: slight white overlay if background is busy */
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		flex-flow: column;
	}

	.memorial-section {
		text-align: center;
		width: 300px;
		/* Adjust width as needed */
		margin-top: 30px;
		/* Space from top */
		margin-right: 50px;
		/* Space from the right content */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.memorial-title {
		font-size: 28px;
		margin-bottom: 20px;
		font-weight: normal;
		/* Match image font weight */
	}

	.portrait-area {
		margin-bottom: 10px;
	}

	.image-slot,
	.icon-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		color: #c0c4cc;
		font-size: 12px;
		border: 1px dashed #dcdfe6;
		box-sizing: border-box;
	}

	.icon-placeholder {
		width: 40px;
		height: 40px;
		border-radius: 4px;
	}


	.deceased-name {
		font-size: 18px;
		margin-bottom: 5px;
	}

	.life-dates {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.visit-stats {
		font-size: 13px;
		color: #888;
		margin-bottom: 20px;
	}

	.action-icons {
		display: flex;
		justify-content: center;
		gap: 15px;
		/* Space between icons */
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		color: #666;
	}

	.action-item span {
		margin-top: 5px;
	}

	/* Area where background is more prominent */
	.content-with-background {
		/* This area might need specific positioning or padding
			depending on how the background image is implemented */
		padding-top: 80px;
		/* Adjust top padding to align with memorial section roughly */
		width: 680px;
		/* Example width */
		display: flex;
		flex-direction: column;
		gap: 40px;
		/* Space between bio and album */
	}

	.biography-section,
	.album-section {
		/* Styles for these sections */
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		/* Add background image/style for the title graphic if needed */
		/* e.g., background: url('title-graphic.png') no-repeat left center; */
		padding-left: 30px;
		/* If using a background graphic */
		position: relative;
		/* If using pseudo-elements for graphics */
	}

	.bio-title {
		/* Specific styles if different */
	}

	.album-title {
		/* Specific styles if different */
	}

	.bio-text {
		font-size: 14px;
		margin-bottom: 10px;
	}

	.page-footer {
		padding: 15px 20px;
		text-align: center;
		font-size: 12px;
		color: #666;
		line-height: 1.8;
		height: auto;
		/* Adjust height */
		margin-top: auto;
		/* Push footer to bottom if content is short */
		background-color: #fff;
		/* Footer usually has a solid background */
	}

	.page-footer .el-divider {
		margin: 10px 0;
	}

	.page-footer .el-link {
		font-size: 12px;
		color: #666;
		margin: 0 3px;
		/* Small spacing around links */
	}

	.page-footer .el-link:hover {
		color: #409EFF;
	}

	.footer-line-1,
	.footer-line-2,
	.footer-line-3,
	.footer-line-4 {
		margin-bottom: 5px;
	}


	.album-section-list{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 20px;
		/* Space between albums */
	}
	.album-section-list-item{
		display: flex;
		align-items: flex-start;
		width: calc((100% - 20px) / 2);
		/* gap: 10px; */
		border: #ff6600 1px dotted;
		cursor: pointer;
	}
	.album-section-list-item-left{
		width: 106px;
		height: 106px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.album-section-list-item-right{
		width: calc(100% - 116px);
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 10px;
	}
	.album-section-list-item-right-user{
		font-size: 16px;
		color: #000;
		font-weight: bold;
	}
	.album-section-list-item-right-user p:last-child{
		width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 2em;

	}
	.album-section-list-item-right-content{
		font-weight: bold;
		font-size: 12px;
		color: #999;
		display: flex;
		justify-content: space-between;
	}

	.photo-list{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 20px;
		margin-top: 20px;
	}

	.photo-back{
		cursor: pointer;
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	.leaveNote-section{
		width: 100%;
	}
	.leaveNote-list{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 20px;
	}
	.leaveNote-list-item{
		width: 100%;
		border: #63805E 1px solid;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.leaveNote-list-item-left{
		width: 114px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: #63805E 1px solid;
		height: 100%;
	}
	.leaveNote-list-item-right{
		width: calc(100% - 114px);
		height: 100%;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
		align-items: flex-start;
		/* margin-left: 10px; */
	}
	.leaveNote-list-item-right p{
		font-size: 16px;
		color: #000;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}
	.leaveNote-list-item-right p:first-child{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 28px;
		border-bottom: #63805E 1px dotted;
	}
	.leaveNote-list-item-right p:last-child{
		width: 100%;
		/* text-indent: 2em; */
	}


	.article-list{
		width: 100%;
	}
	.article-list-item{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		border-top: #63805E 1px dotted;
	}
	.articlebtn{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 10px;
	}


	.section-preview{
		width: 600px;
		height: 300px;
	}
	.section-preview video {
		width: 100%;
		height: 100%;
	}

	
	.video-list{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 20px;
		margin-top: 20px;
	}


	.graveyard_QRcode{
		position: fixed;
		top: 100px;
		right: 20px;
		width: 60px;
		height: 60px;
		padding: 10px;
		z-index: 99999999;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		cursor: pointer;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 50%;
	}
	.graveyard_QRcode image{
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	.qrcode-view{
		width: 100%;
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 20px;
	}
</style>